<template>
  <div class="list" v-if="dataList">
      <div>
        <HeaderPublic @handler="back"></HeaderPublic>
        <div>
            <strong
            :class="{'active':flag===1}"
            @click="changeFlag(1)"
            >人气</strong>
            <strong
            :class="{'active':flag===2}"
            @click="changeFlag(2)"
            >折扣</strong>
            <strong
            :class="{'active':flag===3}"
            @click="changeUp">
            价格
            <i
            class="iconfont"
            :class="up?'icon-shangjiantou':'icon-xiajiantou'"
            ></i>
            </strong>
        </div>
        <p v-if="dataList.couponScheme.eventCoupon[0]">
            <strong>满折</strong>
            <i>{{dataList.couponScheme.eventCoupon[0].couponContent}}</i>
        </p>
        <p v-if="dataList.couponScheme.otherCoupon[0]">
            <strong>免运</strong>
            <i>{{dataList.couponScheme.otherCoupon[0].couponContent}}</i>
        </p>
    </div>
    <ul>
        <router-link
        tag="li"
        :to="{
            name:'productdetail',
            params:{id:pro.productId}
        }"
        v-for="(pro,index) in computedDataList"
        :key="index"
        >
        <img :src="pro.imageUrl" alt="">
        <span>{{pro.tagListDto[0] | filterTag(pro.tagListDto[0])}}</span>
        <i>SIT ON TROUBLE</i>
        <strong>{{pro.productName}}</strong>
        <p>
            <b>&yen;{{pro.price}}</b>
            <b>{{pro.discount | filterDiscount(pro.discount)}}折</b>
        </p>
        </router-link>
    </ul>
  </div>
</template>

<script>
// 引入instance
import { instance } from '@/utils/http'
import HeaderPublic from '@/components/HeaderPublic'
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      up: true,
      flag: 1
    }
  },
  methods: {
    ...mapActions('list', ['getDataList']),
    changeUp () {
      this.up = !this.up
      this.changeFlag(3)
    },
    back () {
      this.$router.back()
    },
    changeFlag (num) {
      this.flag = num
    },
    sortPrice () {
      const arr = this.pros
      if (this.up === false) {
        for (var i = 0; i < arr.length; i++) {
          for (var j = i + 1; j < arr.length; j++) {
            var t = 0
            if (arr[i].price * arr[i].discount > arr[j].price * arr[j].discount) {
              t = arr[i]
              arr[i] = arr[j]
              arr[j] = t
            }
          }
        }
      } else {
        const arr = this.pros
        for (var i = 0; i < arr.length; i++) {
          for (var j = i + 1; j < arr.length; j++) {
            var t = 0
            if (arr[i].price * arr[i].discount < arr[j].price * arr[j].discount) {
              t = arr[i]
              arr[i] = arr[j]
              arr[j] = t
            }
          }
        }
      }
      return arr
    },
    resetSort () {
      const arr = this.pros
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          var t = 0
          if (arr[i].index > arr[j].index) {
            t = arr[i]
            arr[i] = arr[j]
            arr[j] = t
          }
        }
      }
    }
  },
  components: {
    HeaderPublic
  },
  computed: {
    ...mapState('list', ['dataList', 'pros']),
    computedDataList () {
      switch (this.flag) {
        case 1:
          this.resetSort()
          return this.dataList.products.slice(0, 4)
        case 2:
          this.resetSort()
          return this.dataList.products
        case 3:
          return this.sortPrice()
      }
      console.log(computedDataList)
    }
  },
  filters: {
    filterDiscount (data) {
      if (data.split('.')[1] === '0') {
        return data.split('.')[0]
      } else {
        return data
      }
    },
    filterTag (tag) {
      if (!tag) {
        return '买手推荐'
      } else {
        return tag.tag
      }
    }
  },
  created () {
    this.getDataList(this.$route.query.eventCode)
  },
  mounted () {
    this.$store.commit('hide')
  },
  destroyed () {
    this.$store.commit('show')
  }
}
</script>

<style lang="scss" scoped>
.list {
    padding: .16rem;
    div {
        &:first-of-type {
            div {
                display: flex;
                justify-content: space-between;
                margin-top: .26rem;
                margin-bottom: .15rem;
                strong {
                    width: 15%;
                    font-size: .14rem;
                    text-align: center;
                    color: #555;
                    &:first-of-type {
                        text-align: left;
                    }
                    &:last-of-type {
                        text-align: right;
                        i {
                            font-size: .13rem;
                        }
                    }
                    &.active {
                        color: #000;
                    }
                }
            }
            p:nth-of-type(1),
            p:nth-of-type(2) {
                margin-bottom: .07rem;
                strong {
                    padding: .01rem;
                    border: .01rem solid red;
                    margin-right: .05rem;
                    font-size: .08rem;
                    color: red;
                }
                i {
                    font-size: .13rem;
                    color: #000;
                }
            }
        }
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
            display: flex;
            flex-direction: column;
            width: 48%;
            color: #000;
            img {
                width: 100%;
                margin: .06rem 0;
            }
            span {
                width: .51rem;
                border: .01rem solid black;
                font-size: .12rem;
            }
            i {
                margin-top: .03rem;
                font-size: .14rem;
                font-weight: bold;
            }
            strong {
                font-size: .08rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            p {
                display: flex;
                justify-content: space-between;
                margin-top: .03rem;
                font-size: .14rem;
                b {
                    &:nth-of-type(1) {
                        color: red;
                    }
                }
            }
        }
    }
}

</style>
